:root {
  --item-padding: 45px;
}

:local(.sidebar-padding) {
  padding-left: var(--item-padding);
  padding-right: var(--item-padding);
}

:local(.sidebar-margin) {
  margin-left: var(--item-padding);
  margin-right: var(--item-padding);
}

:local(.sidebar) {
  composes: py2 from "style";
  width: 345px;
  background-color: var(--color-bg-light);
  border-right: 1px solid var(--color-border);
  color: var(--color-text-medium);
}

:local(.sidebar) a {
  text-decoration: none;
}

:local(.breadcrumbs) {
  composes: sidebar-padding;
}

:local(.item),
:local(.sectionTitle) {
  composes: flex align-center from "style";
  composes: py2 from "style";
  composes: sidebar-padding;
}

:local(.item) {
  composes: transition-color from "style";
  composes: transition-background from "style";
  font-size: 1em;
  color: var(--color-text-light);
}

:local(.item) :local(.icon) {
  line-height: 1em;
}

:local(.sectionTitle) {
  composes: my1 from "style";
  composes: text-bold from "style";
  font-size: 16px;
}

:local(.item.selected),
:local(.item.selected) :local(.icon),
:local(.sectionTitle.selected),
:local(.item):hover,
:local(.sectionTitle):hover {
  background-color: var(--color-bg-medium);
  color: var(--color-brand);
}

:local(.divider) {
  composes: my2 from "style";
  composes: border-bottom from "style";
  composes: sidebar-margin;
}

:local(.name) {
  composes: ml2 text-bold from "style";
  color: var(--color-text-medium);
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow-x: hidden;
}

:local(.item):hover :local(.name),
:local(.item.selected) :local(.name) {
  color: var(--color-brand);
}

:local(.icon) {
  composes: flex-no-shrink from "style";
}

:local(.noLabelsMessage) {
  composes: relative from "style";
  composes: text-centered from "style";
  composes: p2 my3 from "style";
  composes: text-brand-light from "style";
  composes: sidebar-margin;
}
